<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年07月13日 16:33:52
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class>
    <!-- 批量删除行 -->
    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-button type="danger" @click="batchDelete">批量删除</el-button>
        <el-form-item style="margin-left:10px">
          <el-input v-model="searchForm.keywords" placeholder="请输入关键字" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="tosearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" :index="1" width="120"></el-table-column>
        <el-table-column prop="comment" label="评论内容" width="180"></el-table-column>
        <el-table-column
          prop="baseUser.id"
          label="评论人编号"
          show-overflow-tooltip
          width="180px"
          align="center"
        ></el-table-column>
        <el-table-column prop="articleId" label="资讯编号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="commentTime" label="评论时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="评论状态" show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button @click="deleteById(scope.row.id)" type="text" size="small">删除</el-button>
            <el-button type="text" size="small" v-if="scope.row.status==='未审核'" class="pass" @click="changeStatus(scope.row.id,'通过')">通过</el-button>
            <el-button type="text" size="small" v-if="scope.row.status==='未审核'" class="unpass" @click="changeStatus(scope.row.id,'不通过')">不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2, 5, 8, 10]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  pageQuery,
  batchDelete,
  deleteById,
  check,
  saveOrUpdate
} from "@/api/Infocomments";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      tableData: [],
      ids: [],
      total: 0,
      searchForm: {},
      params: {
        page: 1,
        pageSize: 10
      }
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    params: {
      handler() {
        this.queryPage();
      },
      deep: true
    }
  },
  // 组件方法
  methods: {
    // 审核评论
    async changeStatus(id,status){
      if(status){
        let res = await check({id,status});
        // console.log(res);
        this.$message({
          type:"success",
          message:res.message,
        })
        this.queryPage()
      }
    },
    // 批量删除
    batchDelete() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // 确认删除
          // log(temp)
          
          let res = await batchDelete({ids:this.ids.toString()});
          this.$message({
            type: "success",
            message: res.message
          });
          this.queryPage()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 处理分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.params.page = 1;
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.page = val;
    },
    // 去删除
    deleteById(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let res = await deleteById({ id });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.queryPage();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 处理批量删除
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.id);
      // console.log(this.multipleSelection);
      // console.log(val);
      // let result=val.map((item)=>{
      //   return item.id
      // })
      // console.log(result);
    },
    tosearch() {
      this.queryPage();
    },
    // 分页查询所有评论信息
    async queryPage() {
      let temp = {
        ...this.params,
        ...this.searchForm
      };
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      let res = await pageQuery(temp);
      this.tableData = res.data.list;
      this.total = res.data.total;
    }
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.queryPage();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.pass {
  color: #3a71a8;
  cursor: pointer;
}
.unpass {
  color: #e65d6e;
  cursor: pointer;
}
</style>
